<template>
  <div class="noteShow" @click="handleFunction('show')" />
  <div class="dragArea" v-dragFree="true" v-show="noteShow">
    <div class="dom_drag">
      便签
      <div class="expand" @click="handleFunction('size')"></div>
    </div>
    <Editor
      mode="default"
      v-model="valueHtml"
      :style="noteSize ? editorMax : editorMin"
      @onChange="handleChange"
    />
  </div>
</template>

<script lang="ts" setup>
import "@wangeditor/editor/dist/css/style.css";
import { ref, onMounted } from "vue";
import { Editor } from "@wangeditor/editor-for-vue";
import { openDB, getData, updateData } from "@/utils/indexDB";

const noteShow = ref<boolean>(false);
const noteSize = ref<boolean>(false);
const editorMax = {
  width: "400px",
  height: "300px",
  overflow: "hidden",
};
const editorMin = {
  width: "400px",
  height: "90px",
  overflow: "hidden",
};

// 内容 HTML
const valueHtml = ref("");

const storeName = "note";
const indexDB = ref<any>(null);

onMounted(() => {
  const initCallback = openDB("window_db_note", 1, storeName, "key");
  initCallback.then((result: any) => {
    indexDB.value = result.data;
    getData(result.data, storeName, "text").then((res: any) => {
      if (res.data !== valueHtml.value) {
        valueHtml.value = res.data.value || "";
      }
    });
  });
});

const handleChange = (editor: any) => {
  if (indexDB.value) {
    updateData(indexDB.value, storeName, {
      key: "text",
      value: editor.getHtml(),
    });
  }
};

const handleFunction = (type: string) => {
  if (type === "show") {
    noteShow.value = !noteShow.value;
  }
  if (type === "size") {
    noteSize.value = !noteSize.value;
  }
};
</script>
<style lang="less" scoped>
.noteShow {
  position: fixed;
  right: 10px;
  bottom: 40%;
  z-index: 999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 3px 3px 3px #c8c8c8;
  background-image: url("./images/noteBg.jpeg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
}
.dragArea {
  padding: 12px;
  border-radius: 5px;
  background-color: rgb(235, 229, 209);
  box-shadow: 3px 3px 3px #c8c8c8;
  top: 30%;
  left: 40%;
  .dom_drag {
    width: 100%;
    margin: 0 0 13px 4px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: move;
    .expand {
      width: 25px;
      height: 25px;
      background-image: url("./images/expand.jpeg");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-right: 4px;
      cursor: pointer;
    }
  }
}
</style>
